<template>
	<view class="cart">
		<!-- 没有登录情况 -->
		<view class="noLogin" v-show="isLogin">
			<view class="noLogin-btn" @tap="gotoLogin">
				登录查看我的购物车
			</view>
			<view class="hint">
				为了您的账号安全，请登录后查看
			</view>
		</view>

		<view class="Login">
			<view v-if="showEmpty">
				<empty text="空空如也"></empty>
			</view>

			<view v-if="CartList.length!=0">
				<view class="product">
					<view class="product-itme" v-for="(item,index) in CartList " :key="index">
						<view class="checkItem">
							<checkbox-group @change="checkSelectItem($event, item)">
								<label>
									<checkbox :value="item.productSubTitle" :checked="item.checked"
										style="transform:scale(0.7)" color="#cb0d0d" />
								</label>
							</checkbox-group>
						</view>
						<view class="image" @tap="gotoProduct(item.productId)">
							<image :src="item.productPic" mode=""></image>
						</view>
						<view class="item-Title">
							<view class="item-Title-top">
								<view>
									<view>{{item.productName}}</view>
									<view style="color: gray;">{{skuPdata(item.productAttr)}}</view>
								</view>
								<view style="padding-top: 10rpx;">
									<view @tap="del(item.id)">
										<uni-icons custom-prefix="custom-icon" type="trash" size="21"></uni-icons>
									</view>
								</view>

							</view>
							<view class="item-Title-bottm">
								<view style="display: flex;">
									<view>￥{{item.price}}</view>
									<view style="color: gray;font-size: 20rpx;padding-left: 10rpx;font-weight: 100;">
										小计:{{item.quantity * item.price}}</view>
								</view>
								<view class="advance">
									<span @tap="advance(-1,item.quantity,item.id)">-</span>
									{{item.quantity}}
									<span @tap="advance(1,item.quantity,item.id)">+</span>

								</view>
							</view>
						</view>
					</view>
				</view>


				<view class="cart-bottom">
					<view class="checkAll">
						<!-- 	<checkbox :checked="checkTrue" color="#cb0d0d"></checkbox>
						<text>全选</text> -->
						<checkbox-group @change="checkSelect">
							<label style="display: flex;">
								<checkbox :checked="checkTrue" color="#cb0d0d"></checkbox>
								<text>全选</text>
							</label>
						</checkbox-group>
					</view>
					<view class="checkPrice" style="flex: 1 ;">
						<view class="topPrice">合计:￥{{sumPrice}}</view>
						<view class="bottomPrice">总金额:￥{{sumPrice}} 立减:￥0</view>
					</view>

					<view class="closePrice" @tap="affirm">
						去结算({{number}})
					</view>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				isLogin: false,
				CartList: [],
				showEmpty: false,
				checkTrue: false,
				sumPrice: 0,
				number: 0
			}
		},
		onShow() {
			uni.showLoading({
				title: "加载中"
			})
			setTimeout(() => {
				uni.hideLoading()
				if (uni.getStorageSync("TOKEN")) {
					this.getCartList()
					this.isLogin = false
					this.checkTrue = false
					this.sumPrice = 0
				} else {
					this.isLogin = true
				}
			}, 500)
		},
		onHide() {
			this.isLogin = false
		},
		onLoad() {},
		methods: {
			gotoLogin() {
				uni.navigateTo({
					url: "/pages/view/Login"
				})
			},
			getCartList() {
				this.$api.cart.getCartList().then(res => {
					if (res.code == 200) {
						this.CartList = res.data
						this.checkTrue = false
						this.sumPrice = 0
						this.number = 0
						if (res.data.length == 0) {
							this.showEmpty = true
						} else {
							this.showEmpty = false
						}
					}
				})

			},
			skuPdata(sku) {
				let arr = [];
				JSON.parse(sku).forEach((item) => {
					arr.push(item.value);
				});
				return arr.join("+");
			},
			// 数量添加或者减
			advance(num, number, id) {
				if (number + num == 0) {
					uni.showToast({
						title: "至少为一哦！",
						icon: 'none'
					})
				} else {
					this.sumPrice = 0
					this.checkTrue = false
					this.$api.cart.updateQuantity(id, number + num).then(res => {
						if (res.code == 200) {
							this.getCartList()
						} else {
							uni.showToast({
								title: "请联系管理员！",
								icon: 'none'
							})
						}
					})

				}
			},
			checkSelectItem(e, item) {
				// 如果是取消选中，就把checked置为false,如果是选中，就给添加一个checked=true
				if (item.checked == true) {
					this.$set(item, 'checked', false)
					this.number -= 1
				} else {
					this.$set(item, 'checked', true)
					this.number += 1
				}
				let price = 0
				this.CartList.forEach(item => {
					if (item.checked == true) {
						price += item.quantity * item.price
					}
				})
				this.sumPrice = price

				// 全部手动勾选全选 为勾选
				let result = this.CartList.every((item, index, arr) => {
					return item.checked == true
				})
				this.checkTrue = result
			},
			// 	全选
			checkSelect() {
				if (this.checkTrue == true) {
					this.checkTrue = false;
					this.sumPrice = 0
					this.number = 0
					// 遍历RecordList数组 取消全选
					this.CartList.forEach(item => {
						this.$set(item, 'checked', false)
					})
				} else {
					let price = 0
					// this.sumPrice = price
					this.checkTrue = true;
					// 遍历RecordList数组 设置全选
					this.CartList.forEach(item => {
						this.$set(item, 'checked', true)
						price += item.quantity * item.price
					})
					this.sumPrice = price
					this.number = this.CartList.length
				}
			},
			del(id) {
				uni.showModal({
					title: "确定删除吗？",
					success: (res) => {
						if (res.confirm) {
							this.$api.cart.deleteCart(id).then(res => {
								if (res.code == 200) {
									this.getCartList()
								}
							})
						} else if (res.cancel) {

						}
					}
				})
			},
			gotoProduct(id) {
				uni.navigateTo({
					url: `/pages/view/ProductDetail?Pid=${id}`
				})
			},
			affirm() {
				let ids = []
				this.CartList.forEach(item => {
					if (item.checked == true) {
						ids.push(item.id)
					}
				})

				if (ids.length == 0) {
					uni.showToast({
						title: "请勾选对应商品",
						icon: 'none'
					})
				} else {
					// this.$api.cart.generateConfirmOrder(ids).then(res => {

					// })
					uni.showToast({
						title:"敬请期待！",
						icon:'loading'
					})
				}


			}
		}
	}
</script>

<style lang="scss" scoped>
	.cart {
		width: 100%;
		padding-bottom: 100rpx;

		/deep/ uni-checkbox .uni-checkbox-input {
			border-radius: 30rpx;
		}

		.noLogin {
			height: 500rpx;
			width: 100%;

			.noLogin-btn {
				height: 90rpx;
				width: 400rpx;
				border: 1px solid red;
				margin: 0rpx auto;
				margin-top: 100rpx;
				line-height: 90rpx;
				text-align: center;
				border-radius: 50rpx;
				color: red;
				font-size: 35rpx;
			}

			.hint {
				margin-top: 20rpx;
				text-align: center;
				color: gray;
			}
		}


		.cart-bottom {
			height: 100rpx;
			width: 100%;
			// border-bottom: 1px solid gainsboro;
			border: 1px solid gainsboro;
			position: fixed;
			display: flex;
			justify-content: space-between;
			align-items: center;
			/* #ifdef   APP || APP-NVUE || APP-PLUS || APP-PLUS-NVUE || APP-VUE */
			bottom: 0px;
			/* #endif */
			
			/* #ifdef H5 */
			bottom: 50px;
			/* #endif */
			
			
			/* #ifdef MP-WEIXIN || QUICKAPP-WEBVIEW || QUICKAPP-WEBVIEW-HUAWEI || QUICKAPP-WEBVIEW-UNION */
			bottom: 0rpx;
			/* #endif */

			.checkAll {
				padding-left: 10rpx;
				padding-right: 20rpx;

				text {
					font-size: 30rpx;
					font-weight: 700;
					color: #f12f31;
				}
			}

			.closePrice {
				height: 100%;
				width: 200rpx;
				text-align: center;
				color: white;
				font-size: 30rpx;
				line-height: 100rpx;
				background-image: linear-gradient(to right, #df1f1f, #e82222, red);
			}

			.checkPrice {
				.topPrice {
					font-weight: 700;
				}

				.bottomPrice {
					color: gray;
					font-size: 20rpx;
				}
			}
		}

		.product {
			.product-itme {
				height: 200rpx;
				width: 98%;
				margin: 10rpx auto;
				background-color: white;
				box-shadow: 0 0 10rpx gainsboro;
				display: flex;

				.checkItem {
					width: 50rpx;
					height: 100%;
					padding: 0 10rpx;

					checkbox {
						line-height: 200rpx;
					}
				}

				.image {
					padding: 0 10rpx;

					image {
						width: 200rpx;
						height: 200rpx;
					}
				}

				.item-Title {
					flex: 1;

					.item-Title-top {
						height: 130rpx;
						width: 100%;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;

						view:nth-child(1) {
							flex: 1;
							// overflow:hidden;
							// // word-wrap:break-word;
							// word-break: break-all;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box; //使用自适应布局
							-webkit-line-clamp: 2; //设置超出行数，要设置超出几行显示省略号就把这里改成几
							-webkit-box-orient: vertical;
						}

						view:nth-child(2) {
							margin-right: 10rpx;
						}
					}

					.item-Title-bottm {
						display: flex;
						justify-content: space-between;
						align-items: center;

						view:nth-child(1) {
							font-size: 30rpx;
							color: red;
							font-weight: 700;
						}

						.advance {
							display: flex;

							span {
								text-align: center;
								display: block;
								height: 40rpx;
								width: 40rpx;
								line-height: 40rpx;
								border: 1px solid gainsboro;
								border-radius: 20rpx;
								margin: 0 10rpx;
								box-shadow: 0 0 10rpx gainsboro;
							}
						}
					}
				}
			}
		}
	}
</style>
